<template>
	<view class="banner relative">
		<swiper class="swiper" :indicator-dots="true" indicator-color="#DBD3F9" :autoplay="autoplay" :interval="interval" :circular="false" @change="onChange" indicator-active-color="#6642EA">
			<swiper-item class="swiper_item d-flex" v-for="(item, index) of list" :key="index">
				<image class="mb-60" :src="`/static/image/welcome/icon${index + 1}.svg`" />
				<h6 class="title">{{ item.title }}</h6>
				<p class="descripe">{{ item.descript }}</p>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	
	const autoplay = ref(true)
	const interval = ref(2000)
	
	const list = reactive([
		{
			title: '一份报告，呈现多维度信用风险',
			descript: '数据精灵，深入生活场景，共创信用时代',
		},
		{
			title: '数据安全',
			descript: '我们权力保障您的个人信息安全',
		},
		{
			title: '合规授权',
			descript: '数据资源经官方端到端授权，保障数据真实有效',
		}
	])
	
	let timer = ref(null)
	const onChange = e => {
		console.log(e.detail.current)
		autoplay.value = e.detail.current !== 2
		
		if (e.detail.current === 2) {
			timer.value = setTimeout(() => {
				uni.navigateTo({
					url: '/pages/Home/index',
					success: res => {
						clearTimeout(timer.value);
						timer.value = null;
					}
				})
			}, interval.value)
		} else {
			clearTimeout(timer.value);
			timer.value = null;
		}
	}
</script>

<style lang="scss" scoped>
.banner {
	margin-top: -260rpx;
	width: 100vw;
	height: 60vh;
	.swiper {
		width: 100%;
		height: 100%;
		
		&_item {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.title {
				margin-bottom: 15rpx;
				color: #404040;
				font: {
					size: 30rpx;
				}
			}
			
			.descripe {
				color: #404040;
				font: {
					size: 26rpx
				}
			}
			
			image {
				width: 100vw;
			}
		}
	}
	
	::v-deep {
		.uni-swiper-dot-active {
			width: 40rpx;
			border-radius: 20rpx;
		}
	}
}
</style>
